<template>
	<default-header-page-layout ref="page" title="托盘绑定" >
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<!-- page start -->
				<view class="container-bind-page-content">
					<view class="top-view">
						<scan-input-form-item
							label="托盘编码"
							v-model="inputContainer"
							@search="onSearchContainer"
						/>
					</view>
					<view class="list-view">
						<!-- ########### -->
						<view class="list-item" v-for="(item,index) in list" :key="'list-item-'+index">
							<uni-swipe-action-item :auto-close="false">
								<view class="list-item-show">
									<view class="index-view">
										<uni-badge :text="list.length-index" type="primary" size="normal" />
									</view>
									<view class="content-view auto-wrap">{{item.containerCode}}</view>
								</view>
								<template v-slot:right>
									<view class="swipe-action-btn danger" @tap.stop="onDel(index)"><text>删除</text></view>
								</template>
							</uni-swipe-action-item>
						</view>
						<!-- ########### -->
					</view>
				</view>
				<!-- page end -->
			</view>
		</view>
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<view class="btn-frame"><u-button text="重 置" @click="onReset"></u-button></view>
				<view class="divider"></view>
				<view class="btn-frame"><u-button type="primary" text="确 定" :disabled="!list.length" @click="onConfirm"></u-button></view>
			</view>
		</template>
	</default-header-page-layout>
</template>

<script>
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
import ActionUserRow from '@/components/ActionUserRow.vue'
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import { $successInfo, parseDic, $alert } from '@/static/js/utils/index.js'
let initInterVal = null;
export default {
	name:'containerBindPage',
	components:{DefaultHeaderPageLayout,ActionUserRow,ScanInputFormItem},
	data(){
		return {
			pageBodyHeight:0,
			inputContainer:'',
			list:[]
		}
	},
	methods:{
		/* 托盘编码搜索 */
		onSearchContainer(){
			if (!this.inputContainer) {
			  $alert('请输入托盘号！');
			  return false;
			}
			this.addListData()
		},
		reset(){
			this.inputContainer = ''
			this.list = []
		},
		onDel(index) {
			this.list.splice(index,1)
		},
		addListData(){
			let _isExist = false;
			for (let i=0;i<this.list.length;i++) {
				if (this.list[i].containerCode===this.inputContainer) {
					_isExist = true
					break;
				}
			}
			if (!_isExist) {
				this.list.unshift({containerCode:this.inputContainer})
			} else {
				$alert('托盘码重复！');
			}
		},
		onReset(){
			this.reset()
		},
		onConfirm(){
			this.dealSubmit((f)=>{
			  if (f) {
					this.reset()
			    $successInfo('绑定成功！');
			  } 
			})
		},
		/* 解绑接口调用 */
		dealSubmit(callback){
			let params = {
			  bindContainerMaterials:this.list
			}
			params.containerCode = this.list[this.list.length-1].containerCode
			this.$api.post('BindContainer',params,{block:'generic'}).then(()=>{
				callback && callback(true)
			}).catch(()=>{
				callback && callback(false)
			})
		},
		/* 页面初始化获取页面body高度的定时器 */
		startInitInterval(callback){
			initInterVal = setInterval(()=>{
				if (this.pageBodyHeight) {
					this.clearInitInterval()
					callback && callback()
				} else {
					this.pageBodyHeight = this.$refs.page.getBodyHeight()
				}
			},200)
		},
		/* 清除定时器 */
		clearInitInterval(){
			try{
				clearInterval(initInterVal)
				initInterVal = null
			}catch(e){
				//TODO handle the exception
			}
		}
	},
	onReady(){
		this.startInitInterval(()=>{
			/* 页面初始化后需要执行的代码在这边调用 */
		})
	},
	onUnload(){
		this.clearInitInterval()
	}
}
</script>

<style scoped lang="scss">
.bottom-btns-row{
	display: flex;
	padding: 10rpx 20rpx;
	background-color: #fff;
	.btn-frame{
		width: 1%;
		box-sizing: border-box;
		flex-grow: 1;
	}
	.divider{
		width: 20rpx;
		flex-shrink: 0;
	}
}
.container-bind-page-content{
	height: 100%;
	display: flex;
	flex-direction: column;
	.top-view{
		flex-shrink: 0;
		padding-bottom:12rpx;
	}
	.list-view {
		height: 1px;
		flex-grow: 1;
		overflow: auto;
	}
	.list-item {
		margin-bottom: 12rpx;
		border-width: 2rpx 0;
		border-style: solid;
		border-color: $uni-border-color;
		&:last-child{
			margin-bottom: 0;
		}
	}
	.list-item-show{
		background-color: $uni-bg-color;
		display: flex;
		.index-view{
			flex-shrink: 0;
			padding: 16rpx 4rpx 0 16rpx;
		}
		.content-view{
			flex-grow: 1;
			width: 1px;
			font-size: 32rpx;
			padding: 16rpx 8rpx;
			line-height: 1.3em;
		}
	}
	.swipe-action-btn{
		display: flex;
		color: $uni-bg-color;
		background-color: $u-primary;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100rpx;
		&.danger{
			background-color: $u-error;
		}
	}
}
</style>